<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>打字机效果动画</title>
    <link rel="stylesheet" href="bootstrap.min.css">
    <link rel="stylesheet" href="index3.css">
</head>

<body>
    <header>
        <h1>
            打字机效果动画
        </h1>
    </header>

    <!-- 主体部分 -->
    <main>
        <div class="container">
            <p>五月天的
                <span class="typed-text"></span>
                <span class="cursor"> </span>
                <span class="typed-cursor typed-cursor--blink">|</span>
                <span class="typed-cursor">|</span>
            </p>
        </div>
    </main>

    <!-- 步骤分解 -->
    <section>
        <div class="accordion" id="accordionExample">
            <div class="card">
                <div class="card-header" id="headingOne">
                    <h2 class="mb-0">
                        <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse"
                            data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                            HTML代码
                        </button>
                    </h2>
                </div>

                <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
                    data-parent="#accordionExample">
                    <div class="card-body">
                        <pre>
                            &lt;div class="container"&gt;
                            &lt;p&gt; 五月天的
                            &lt;span class="typed-text"&gt;&lt;/span&gt;
                            &lt;span class="cursor"&gt;&lt;/span&gt;
                            &lt;span class="typed-cursor typed-cursor--blink"&gt; | &lt;/span&gt;
                            &lt;span class="typed-cursor"&gt; | &lt;/span&gt;
                            &lt;/p&gt;
                            &lt;/div&gt;
                              
                        </pre>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-header" id="headingTwo">
                    <h2 class="mb-0">
                        <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse"
                            data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                            CSS代码
                        </button>
                    </h2>
                </div>
                <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
                    <div class="card-body">
                        <pre>
                        h1, h2, h3, h4, h5 {
                            text-align: center;
                        }
                        
                        .container {
                            height: 100px;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                        }
                        
                        .container p {
                            font-size: 3rem;
                            padding: 1rem;
                            font-weight: bold;
                            letter-spacing: 0.1rem;
                            text-align: center;
                            overflow: hidden;
                        }
                        
                        .container p span.typed-text {
                            font-weight: normal;
                            color: coral;
                        }
                        
                        .container p span.cursor {
                            display: inline-block;
                            background-color: cornsilk;
                            margin-left: 0.1rem;
                            width: 3px;
                            animation: blink 1s infinite;
                        }
                        
                        .container p span.cursor.typing {
                            animation: none;
                        }
                        
                        .list li {
                            list-style-type: none;
                            text-align: center;
                        }

                        /* 光标动画 */

                        .typed-cursor {
                              opacity: 1;
                        }

                        .typed-cursor.typed-cursor--blink {
                             animation: typedjsBlink 0.7s infinite;
                             -webkit-animation: typedjsBlink 0.7s infinite;
                             animation: typedjsBlink 0.7s infinite;
                        }

                        @keyframes typedjsBlink {
                          50% {
                               opacity: 0.0;
                            }
                        }

                        @-webkit-keyframes typedjsBlink {
                            0% {
                                 opacity: 1;
                             }
                          50% {
                                 opacity: 0.0;
                             }
                         100% {
                                 opacity: 1;
                              }
                        }
                      </pre>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-header" id="headingThree">
                    <h2 class="mb-0">
                        <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse"
                            data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                            JS代码
                        </button>
                    </h2>
                </div>
                <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
                    <div class="card-body">
                        <pre>
                        &lt;script&gt;
                        const typedTextSpan = document.querySelector(".typed-text");
                        const cursorSpan = document.querySelector(".cursor");
                
                
                        const textArray = ["任意门", "时光机", "憨人", "第二人生", "人生海海"];
                        const typingSpeed = 200;
                        const erasingSpeed = 100;
                        const newTextDelay = 2000;
                        let textArrayIndex = 0;
                        let charIndex = 0;
                
                        function type() {
                            if (charIndex < textArray[textArrayIndex].length) {
                                if (!cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing");
                                typedTextSpan.textContent += textArray[textArrayIndex].charAt(charIndex);
                                charIndex++;
                                setTimeout(type, typingSpeed);
                            }
                            else {
                                cursorSpan.classList.remove("typing");
                                setTimeout(erase, newTextDelay);
                            }
                        }
                
                        function erase() {
                            if (charIndex > 0) {
                                if (!cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing");
                                typedTextSpan.textContent = textArray[textArrayIndex].substring(0, charIndex - 1);
                                charIndex--;
                                setTimeout(erase, erasingSpeed);
                            }
                            else {
                                cursorSpan.classList.remove("typing");
                                textArrayIndex++;
                                if (textArrayIndex >= textArray.length) textArrayIndex = 0;
                                setTimeout(type, typingSpeed + 1100);
                            }
                        }
                
                        document.addEventListener("DOMContentLoaded", function () {
                            setTimeout(type, newTextDelay + 250);
                        });
                        &lt;/script&gt;
                     </pre>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <!-- JS元素 -->
    <section>
        <script>
            const typedTextSpan = document.querySelector(".typed-text");
            const cursorSpan = document.querySelector(".cursor");


            const textArray = ["任意门", "时光机", "憨人", "第二人生", "人生海海"];
            const typingSpeed = 200;
            const erasingSpeed = 100;
            const newTextDelay = 2000;
            let textArrayIndex = 0;
            let charIndex = 0;

            function type() {
                if (charIndex < textArray[textArrayIndex].length) {
                    if (!cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing");
                    typedTextSpan.textContent += textArray[textArrayIndex].charAt(charIndex);
                    charIndex++;
                    setTimeout(type, typingSpeed);
                }
                else {
                    cursorSpan.classList.remove("typing");
                    setTimeout(erase, newTextDelay);
                }
            }

            function erase() {
                if (charIndex > 0) {
                    if (!cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing");
                    typedTextSpan.textContent = textArray[textArrayIndex].substring(0, charIndex - 1);
                    charIndex--;
                    setTimeout(erase, erasingSpeed);
                }
                else {
                    cursorSpan.classList.remove("typing");
                    textArrayIndex++;
                    if (textArrayIndex >= textArray.length) textArrayIndex = 0;
                    setTimeout(type, typingSpeed + 1100);
                }
            }

            document.addEventListener("DOMContentLoaded", function () {
                setTimeout(type, newTextDelay + 250);
            });
        </script>

    </section>


    <!-- 脚本注释 -->
    <footer>

        <p class="text-center meta text-black-50">
            <shan>西北民族大学</shan>
            <shan>《网络编辑与制作》</shan>
            <shan>指导老师：杨志宏</shan>
            <shan> 作者：钟敏烨</shan>
        </p>

    </footer>


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.slim.min.js"
        integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js"
        integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
        crossorigin="anonymous"></script>
</body>

</html>